<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>z1crypto-JS</title>
</head>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <!-- <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/aes.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/enc-base64.min.js"></script> -->

    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/crypto-js.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/aes.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/crypto-js@4.1.1/enc-base64.min.js"></script>
 
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jsencrypt@3.3.2/bin/jsencrypt.min.js"></script>

<body>
    <div class="z1section">
        <h1>AES</h1>
        <h3>aes_key</h3>
        <textarea id="aes_key" rows="5" cols="65">my32digitkey12345678901234567890</textarea>

        <h3>aes_text</h3>
        <textarea id="aes_text" rows="5" cols="65">hellow word!</textarea>
        <br>
        <input id="aes_go_encode" type="button" value="go_encode">

        <h3>aes_encode</h3>
        <textarea id="aes_encode" rows="5" cols="65">7Bka70OUHb4BfZFm92wsHQ==</textarea>
        <br>
        <input id="aes_go_decode" type="button" value="go_decode">

        <h3>Reference</h3>
        <pre>
            https://blog.csdn.net/weixin_41806099/article/details/132137943
            https://blog.csdn.net/qq_40927742/article/details/119516537
            https://studygolang.com/articles/35387
            js php golang  https://news.sangniao.com/p/3723057230
        </pre>

        <script>

            function aesEncrypt() {
                var plainText = arguments[0]
                var key = arguments[1]
                var iv = arguments.length>2 ? arguments[2] : '';

                iv=iv + `1234567890123456`
                iv=iv.substring(0,16)

                key = CryptoJS.enc.Utf8.parse(key);
                iv = CryptoJS.enc.Utf8.parse(iv);

                var encryptedData = CryptoJS.AES.encrypt(plainText, key, {
                    iv:iv,
                    mode: CryptoJS.mode.CBC,
                    padding: CryptoJS.pad.Pkcs7
                });

                var encryptedBase64Str = CryptoJS.enc.Base64.stringify(encryptedData.ciphertext);

                return encryptedBase64Str;
            }
            
            function aesDecrypt() {
                var encryptedData = arguments[0]
                var key = arguments[1]
                var iv = arguments[2] ? arguments[2] : '';

                iv=iv + `1234567890123456`
                iv=iv.substring(0,16)

                key = CryptoJS.enc.Utf8.parse(key);
                iv = CryptoJS.enc.Utf8.parse(iv);
                
                var decryptedData = CryptoJS.AES.decrypt(encryptedData, key, {
                    iv:iv,
                    mode: CryptoJS.mode.CBC,
                    padding: CryptoJS.pad.Pkcs7
                });

                var decryptedStr = decryptedData.toString(CryptoJS.enc.Utf8);

                return decryptedStr
            }

            function main() {
                $('#aes_go_encode').click(function () {
                    $('#aes_encode').val(aesEncrypt($('#aes_text').val(),$('#aes_key').val()))
                });

                $('#aes_go_decode').click(function () {
                    $('#aes_text').val(aesDecrypt($('#aes_encode').val(),$('#aes_key').val()))
                });
            }

            main();

        </script>

    </div>

    <div class="z1section">
        <h1>RSA</h1>
        <h3>rsa_key_public</h3>
        <textarea id="rsa_key_public" rows="15" cols="65">-----BEGIN PUBLIC KEY-----
MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC3oSDe9Gu6AcoNU0NYQRBi3Pid
wqlet/PpMddqlqnUO4sP4R0/ABOHbf/1byVbfKsbpEQqan2+v8x7MvrjZtzl6cAq
rGkp3zmfvMHSkYBaQFZym0Hc49sMCbygCy77Hw9PnXsFIFayTsT97Whd6U8HzKg5
1wHoSW+eq2QmjZUCsQIDAQAB
-----END PUBLIC KEY-----</textarea>
        <h3>rsa_key_private</h3>
        <textarea id="rsa_key_private" rows="15" cols="65">-----BEGIN RSA PRIVATE KEY-----
MIICXwIBAAKBgQC3oSDe9Gu6AcoNU0NYQRBi3Pidwqlet/PpMddqlqnUO4sP4R0/
ABOHbf/1byVbfKsbpEQqan2+v8x7MvrjZtzl6cAqrGkp3zmfvMHSkYBaQFZym0Hc
49sMCbygCy77Hw9PnXsFIFayTsT97Whd6U8HzKg51wHoSW+eq2QmjZUCsQIDAQAB
AoGBAIHnyFRR/5/gQit5GuxlYw09m9gnbSBn7HKtYuKx4UUWNoOuUr1N9YLai7f6
wCffo0DzzZFgMsLt9t+1Kg4Tp/L/Z9n1zOIDTViETZrLChzpbaIf413d0kd7uwJd
R4L5+adKWI7KNfHiuiJOycz7njhqQGVr30U2GNRRsL0YBhhRAkEA5BIbi10bpRnC
ZCCM+sABXJPnoGwpJHZ5Q+Ntqsq5NbgBmQPZYisK5jgGUuDR1vuMkFnwve7IqEc1
So9yiYQLnQJBAM4dz0SGRzhu0GkzIvbwXRxakTjQAVH2z/mF1JnRQkMelymkwb7A
c1/N4/gWbphAoVwjnbc19YqhG2HUePPBGSUCQQDeL53R6UUTVMMCFIwDhKZO8HBI
4tY6BYkh0CB4sMI6SSaVUSCn+FLH8XCHsSn8jFdmEZjtEAE/nw+VsaXdvlwpAkEA
wWd5UExLUemxR7VDDsFWLT/SWqPbSUS1u+ZXKooPihmPL/U4EzxURkZUrjqmRdkH
UATffcV1BELOBcswP1EmvQJBALpQG6QqeFzeCjFer1LyNDyhENeceyDsJ32T9X6y
ZsfY0Y4XYNzLWsLGNsG5DT8p958wBytqZ/cnk2Kzes8RREQ=
-----END RSA PRIVATE KEY-----</textarea>

        <h3>rsa_text</h3>
        <textarea id="rsa_text" rows="5" cols="65">hellow word!</textarea>
        <br>
        <input id="rsa_go_encode" type="button" value="go_encode">

        <h3>rsa_encode</h3>
        <textarea id="rsa_encode" rows="5" cols="65">Zdi4y0bnkcRUIhLzthajYxZ93/D+5qvngkKz9W7Ed4QYkHWl14sXdKrf53ogAIUH82UfatkKGMwLEVq9i5HJ3cpqygq1EdsC/vUA6oOX/cmcE2gdqXtrbRj0taDThhxLxHZJ09DCN8AkPotulaBZpWop21q8/P/liDpPdgGsyUs=</textarea>
        <br>
        <input id="rsa_go_decode" type="button" value="go_decode">

        <h3>Reference</h3>
        <pre>
            https://blog.csdn.net/weixin_41806099/article/details/132137943
            https://www.npmjs.com/package/jsencrypt/
            https://www.cnblogs.com/heyongshen/p/16790924.html
            rsa php and golang use  https://www.yii666.com/blog/129530.html
        </pre>

        <script>

            function main() {
                $('#rsa_go_encode').click(function () {
                    var encrypt = new JSEncrypt();
                    encrypt.setPublicKey($('#rsa_key_public').val());
                    var encrypted = encrypt.encrypt($('#rsa_text').val());
                    $('#rsa_encode').val(encrypted);
                });

                $('#rsa_go_decode').click(function () {
                    var decrypt = new JSEncrypt();
                    decrypt.setPrivateKey($('#rsa_key_private').val());
                    var uncrypted = decrypt.decrypt($('#rsa_encode').val());
                    $('#rsa_text').val(uncrypted)
                });
            }

            main();

        </script>

    </div>

    <div class="z1section">
        <h1>BASE64</h1>
        <h3>base64_text</h3>
        <textarea id="base64_text" rows="5" cols="65">hellow word!</textarea>
        <br>
        <input id="base64_go_encode" type="button" value="go_encode">

        <h3>base64_encode</h3>
        <textarea id="base64_encode" rows="5" cols="65">aGVsbG93IHdvcmQh</textarea>
        <br>
        <input id="base64_go_decode" type="button" value="go_decode">

        <h3>Reference</h3>
        <pre>
            https://blog.csdn.net/weixin_41806099/article/details/132137943
            https://blog.csdn.net/qq_40927742/article/details/119516537
            https://studygolang.com/articles/35387
        </pre>

        <script>

            function main() {
                $('#base64_go_encode').click(function () {
                    var str = $('#base64_text').val();
                    var base64Str = CryptoJS.enc.Base64.stringify(CryptoJS.enc.Utf8.parse(str));
                    $('#base64_encode').val(base64Str);
                });

                $('#base64_go_decode').click(function () {
                    var base64Str = $('#base64_encode').val();
                    var decodedStr = CryptoJS.enc.Utf8.stringify(CryptoJS.enc.Base64.parse(base64Str));
                    $('#base64_text').val(decodedStr);
                });
            }

            main();

        </script>

    </div>

    <div class="z1section">
        <h1>MD5</h1>
        <h3>md5_text</h3>
        <textarea id="md5_text" rows="5" cols="65">hellow word!</textarea>
        <br>
        <input id="md5_go_encode" type="button" value="go_encode">

        <h3>md5_encode</h3>
        <textarea id="md5_encode" rows="5" cols="65">b7d0c8253a7fcab599ea2458bbaff0fd</textarea>
        <br>

        <h3>Reference</h3>
        <pre>
            https://blog.csdn.net/weixin_41806099/article/details/132137943
            https://blog.csdn.net/qq_40927742/article/details/119516537
            https://studygolang.com/articles/35387
        </pre>

        <script>

            function main() {
                $('#md5_go_encode').click(function () {
                    var str = $('#md5_text').val();
                    var md5Str = CryptoJS.MD5(str).toString();
                    $('#md5_encode').val(md5Str);
                });
            }

            main();

        </script>

    </div>


</body>
</html>
